<template>
    <!-- 存放二维码的图片-->
    <view class='container' :style="'width: ' + qrWidth + 'rpx;height: ' + qrWidth + 'rpx;'">
        <!-- <image :style="'width: ' + qrWidth + 'rpx;height: ' + qrWidth + 'rpx;'" @tap="previewImg" mode="scaleToFill"
            :src="imagePath"></image> -->
        <canvas :style="'width: ' + qrWidth + 'rpx;height: ' + qrWidth + 'rpx;background:#971005;'" canvas-id="mycanvas" />
    </view>
    <!-- 画布，用来画二维码，只用来占位，不用来显示-->
    <!-- <view class="canvas-box">
        <canvas hidden="{{canvasHidden}}"
            :style="'width: ' + qrWidth + 'rpx;height: ' + qrWidth + 'rpx;background:#f1f1f1;'" canvas-id="mycanvas" />
    </view> -->
</template>

<script>
var QR = require("../../assets/js/qrcode")
import Taro from '@tarojs/taro'

export default {
    name: 'Index',
    data() {
        return {
            // activityId: 891,
            canvasHidden: false,
            imagePath: '',
        }
    },
    props: {
        qrWidth: {
            type: Number,
            default: () => 686,
        },
        text: {
            type: String,
            require: true
        },
        colorDark: {
            type: String,
            default: '#971005',
            require: false
        },
        colorLight: {
            type: String,
            default: '#000',
            require: false
        },
        margin: {
            type: Number,
            default: 4,
            require: false
        }
    },
    mounted() {
        this.$nextTick(() => {
            var size = this.setCanvasSize(); //动态设置画布大小
            // 二维码内容（一个小程序的页面链接：https://www.**.com:8080?activity=）
            // var url = this.weChatPath + this.activityId
            var url = this.text
            this.createQrCode(this.margin, this.colorDark, this.colorLight, url, "mycanvas", size.w, size.h,);
        })
    },
    methods: {
        //适配不同屏幕大小的canvas
        setCanvasSize: function () {
            var size = {};
            try {
                var res = Taro.getSystemInfoSync();
                var scale = 750 / this.qrWidth; //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
                var width = res.windowWidth / scale;
                var height = width; //canvas画布为正方形
                size.w = width;
                size.h = height;
            } catch (e) {
                // Do something when catch error
                console.log("获取设备信息失败" + e);
            }
            return size;
        },
        /**
         * 绘制二维码图片
         */
        createQrCode: function (margin, colorDark, colorLight, url, canvasId, cavW, cavH) {
            //调用插件中的draw方法，绘制二维码图片
            QR.api.draw(margin, colorDark, colorLight, url, canvasId, cavW, cavH, '');
            // setTimeout(() => {
            //     this.canvasToTempImage();
            // }, 1000);
        },
        /**
         * 获取临时缓存照片路径，存入data中
         */
        // canvasToTempImage: function () {
        //     var that = this;
        //     //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
        //     wx.canvasToTempFilePath({
        //         canvasId: 'mycanvas',
        //         success: function (res) {
        //             var tempFilePath = res.tempFilePath;
        //             console.log(tempFilePath);
        //             that.imagePath = tempFilePath
        //         },
        //         fail: function (res) {
        //             console.log(res);
        //         }
        //     });
        // },
        /**
         * 点击图片进行预览
         */
        // previewImg: function (e) {
        //     var img = this.imagePath;
        //     console.log(img);
        //     wx.previewImage({
        //         current: img, // 当前显示图片的http链接
        //         urls: [img] // 需要预览的图片http链接列表
        //     });
        // },
    },
}
</script>

<style>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.container image {
    background-color: #f9f9f9;
}

.canvas-box {
    position: fixed;
    top: 999999rpx;
    left: 0;
}
</style>

